<template>
	<view style="height: 100vh;">
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" title="购物背包" placeholder :autoBack="true"
			bgColor="transparent">
			<template #center>
				<div class="nav_center relative">
					购物背包
					<div class="nav_center-management absolute" @click="management">{{managementStatus?'完成':'管理'}}</div>
				</div>
			</template>
		</up-navbar>

		<view class="cart-box">
			<up-empty v-if="response.list.length === 0" textColor='#fff' iconColor="#fff" mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png">
			</up-empty>
			<view class="cart-box-item flex align-item_center border-box" v-for="item in response.list" :key="item.id"
				@click="checkProduct(item)">
				<image v-if="checkList.has(item.id)" src="https://ryyf.wangjintech.cn/static/image/point/check1.png"
					class="block flex-shrink0"></image>
				<image v-else src="https://ryyf.wangjintech.cn/static/image/point/check2.png" class="block flex-shrink0">
				</image>
				<omitProduct style="width: 100%;" :item="item" />
			</view>
		</view>

		<view class="cart-foot fixed flex align-item_center border-box justify-content_space-between">
			<view class="cart-foot-check flex align-item_center" @click="checkAllProdcut">
				<image v-if="checkAll" src="https://ryyf.wangjintech.cn/static/image/point/check1.png"
					class="block flex-shrink0"></image>
				<image v-else src="https://ryyf.wangjintech.cn/static/image/point/check3.png" class="block flex-shrink0">
				</image>
				<view>全选</view>
			</view>
			<view class="cart-foot-num" v-if="!managementStatus">已选{{total}}件，合计<text>{{countPoints}}积分</text></view>
			<view class="cart-foot-count" @click="confirm">{{managementStatus?'删除':'结算'}}</view>
		</view>

		<up-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" :duration="200" :bottom="160"></up-back-top>
		<up-gap height="180rpx"></up-gap>
	</view>
</template>

<script setup>
	import omitProduct from "../components/omitProduct.vue"
	import {
		computed,
		reactive,
		ref
	} from "vue"
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app"
	import secondApi from "@/api/biz/second.js"
	import {
		msg
	} from "@/utils/tool.js"

	const scrollTop = ref(0);
	const iconStyle = {
		fontSize: '32rpx',
		color: '#2979ff'
	};

	// 确定
	const confirm = () => {
		if (checkList.value.size === 0) return msg("未选择商品");
		let ids = []
		checkList.value.forEach(item => ids.push(item.id))

		if (managementStatus.value) {
			delCartProduct(ids)
		} else {
			payPoint(ids)
		}
	}
	// 删除
	const delCartProduct = (ids) => {
		uni.showModal({
			title: "提示",
			content: "是否确认删除已选购物车商品？",
			success(e) {
				if (e.confirm) {
					secondApi.deleteUserShopCard(ids.join()).then(res => {
						if (res.code === 0) {
							msg("删除成功")
							afterResponse()
						}
					})
				}
			}
		})
	}
	// 结算
	const payPoint = (ids) => {
		uni.navigateTo({
			url: "/pointProduct/pay/index?ids=" + ids.join()
		})
	}

	// 结果处理
	const afterResponse = () => {
		getShopCardList()
		checkList.value.clear();
		checkAllProdcut()
	}

	// 管理
	const managementStatus = ref(false);
	const management = () => {
		managementStatus.value = !managementStatus.value
		checkList.value.clear()
	}

	// 全选
	const checkAllProdcut = () => {
		if (checkList.value.size === response.list.length) checkList.value.clear();
		else {
			response.list.forEach(item => {
				if (!checkList.value.has(item.id)) checkList.value.set(item.id, item)
			})
		}

		selectAll()
	}

	// 是否全选
	const selectAll = () => {
		if ((checkList.value.size === response.list.length) && response.list.length !== 0) checkAll.value = true;
		else checkAll.value = false;

		statistics()
	}

	// 处理统计
	const statistics = () => {
		total.value = 0;
		countPoints.value = 0
		checkList.value.forEach(item => {
			let count = item.count;
			let countPoint = item.productRespVO.point * count;
			total.value += count;
			countPoints.value += countPoint
		})
	}

	// 全选商品
	const checkAll = ref(false);
	// 选择商品
	const checkList = ref(new Map());
	const total = ref(0);
	const countPoints = ref(0);
	const checkProduct = (item) => {
		if (checkList.value.has(item.id)) checkList.value.delete(item.id)
		else checkList.value.set(item.id, item)

		// 是否全选
		selectAll()
	}

	const response = reactive({
		list: [],
		total: 0
	})

	onReachBottom(() => {
		if (response.list.length >= response.total) return;
		queryParams.pageNo++;
		getProductPage()
	})

	const getShopCardList = () => {
		secondApi.getShopCardList().then(res => {
			response.list = res.data;
		})
	}

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	onShow(() => {
		getShopCardList()
		checkList.value.clear()
		selectAll()
	})
</script>

<style>
	page {
		background: #1B1829;
	}
</style>
<style scoped lang="scss">
	.cart-foot {
		width: 100vw;
		bottom: 0rpx;
		padding: 30rpx;
		padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
		padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2

		background: #FFFFFF;

		&-count {
			width: 170rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: #4E96E9;
			border-radius: 100rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		&-num {
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;

			text {
				color: #4E96E9;
				font-size: 36rpx;
			}
		}

		&-check {
			view {
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}
	}

	.nav_center {
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;

		&-management {
			white-space: nowrap;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			top: 50%;
			left: calc(50% + 130rpx);
			transform: translate(-50%, -50%);
		}
	}

	.cart-box {
		&-item {
			margin: 20rpx auto 0;
			padding: 30rpx 20rpx;
			width: 690rpx;
			height: 240rpx;
			background: #25223B;
			border-radius: 16rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>